<template>
  <div class="clinic-manage">
    <div style="height: 100%;">
      <el-tabs
        v-model="activeName" v-if="menuItem.length > 0"
        class="custom-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="tab in menuItem"
          :key="tab.perms"
          :label="tab.menuName"
          :name="tab.perms"
        >
        </el-tab-pane>
      </el-tabs>
      <div class="tab-content" v-if="activeName == 'manage-clinic-clinic'">
        <clinicInfo />
      </div>
      <div class="tab-content" v-if="activeName == 'manage-clinic-dept'">
        <Department />
      </div>
      <div class="tab-content" v-if="activeName == 'manage-clinic-room'">
        <RoomList />
      </div>
      <div class="tab-content" v-if="activeName == 'manage-clinic-emp'">
        <EmpList />
      </div>
      <div class="tab-content" v-if="activeName == 'manage-clinic-role'">
        <RoleList />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus';
import clinicInfo from './common/clinicInfo/index.vue';
import Department from './common/department/index.vue';
import RoomList from './common/roomList/index.vue';
import EmpList from './common/empList/index.vue';
import RoleList from './common/roleList/index.vue';
import stores from '@/store';

const route = useRoute();
const query = route.query;
//菜单权限
let menuList = ref<any>( await stores.useBaseDataStore().findMenuList(route.query.submenuId));

menuList.value.filter((item:any) => {
  return item.menuType == 1;
})
let menuItem = ref<any>(menuList.value);

interface TabItem {
  label: string;
  name: string;
}
const activeName = ref<any>('');
const tabValue = ref<any[]>([]);


// for (let i = 0; i < menuItem.value.length; i++) {
//   const element = menuItem.value[i];
//   if (element.perms === 'manage-managePages-clinic') {
//     //诊所信息
//     tabValue.value.push({
//       label: element.menuName,
//       name: 'clinicInfo',
//     });
//   }else if (element.perms === 'manage-managePages-dept') {
//     //科室管理
//     tabValue.value.push({
//       label: '',
//       name: 'department',
//     });
//   }else if (element.perms === 'manage-managePages-room') {
//     //诊室管理
//     tabValue.value.push({
//       label: '',
//       name: 'roomList',
//     });
//   }else if (element.perms === 'manage-managePages-emp') {
//     //员工管理
//     tabValue.value.push({
//       label: '',
//       name: 'empList',
//     });
//   } else if (element.perms === 'manage-managePages-role') {
//     //角色管理
//     tabValue.value.push({
//       label: '',
//       name: 'roleList',
//     });
//   }
  
// }

if(menuItem.value.length > 0){
  activeName.value = menuItem.value[0].perms;
}
if(query.tab){
  activeName.value = query.tab;
  navigateTo('/manage/managePages/clinic?menuId='+query.menuId+'&'+'submenuId='+query.submenuId);
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  
};
</script>

<style lang="scss" scoped>
.clinic-manage{
  height: 100%;
}
.tab-content {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  height: calc(100% - 52px);
  color: var(--text-color-primary);
  font-size: 16px;
  line-height: 1.6;
  margin-top: 5px;

  /* 响应式设计 */
  @media (max-width: 768px) {
    font-size: 14px;
    min-height: 300px;
  }
}

.tab-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;

  .el-empty {
    padding: 40px 0;
  }
}
::v-deep(.el-tabs__item) {
  width: 110px !important; /* 设置每个tab的宽度 */
  padding: 0 !important; /* 去除默认padding */
  font-size: 16px !important; /* 设置字体大小 */
}
::v-deep(.el-tabs__nav-wrap:after){
    height: 1px !important;
}
</style>
<style lang="scss"></style>
